<template>
  <div>
    <Cars ref="car" />
    <Map ref="map" @callbackComponent="callbackComponent" />
    <Navbar />
    <!-- <div id="children-view" :class="[isShow?'open':'']" > -->
    <div id="children-view" :class="{open:show}" >
      <router-view />
    </div>
    <Login />
    <div v-if="cars_active_data && cars_active_data.order_no" class="cars-active">
      <router-link class="color-white" :to="{path:'/orderDetailed',query:{order_no:cars_active_data.order_no}}">正在使用的车辆</router-link>
    </div>
    <div class="btn-group" v-if="cars_active_data && cars_active_data.order_no">
      <div v-if="cars_active_data.order_status === 'RETURN'">
        停车场ID：
        <el-button size="small" v-for="item in parkingIdItem" :key="item" @click="parking_id = item">{{item}}</el-button>
      </div>
      <el-button @click="handleGetCar" type="primary" size="small" v-if="cars_active_data.order_status === 'WAIT'">取车</el-button>
      <el-button @click="handleReturnCar" type="primary" size="small" v-if="cars_active_data.order_status === 'RETURN'">还车</el-button>
      <el-button @click="handleCancelCar" type="primary" size="small" v-if="cars_active_data.order_status === 'WAIT'">取消</el-button>
    </div>
  </div>

</template>

<script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap';
import Map from "../amap/index"
import Cars from "../cars/index"
import Navbar from "@c/navbar"
import Login from "./login"
import { Parking } from "@/api/parking.js";
import {CarsActivation,CarsGet,CarsReturns,CarsCancel} from "@/api/pay.js";

export default {
  name: "Index",
  components: {
    Map,
    Cars,
    Navbar,
    Login
  },
  data() { 
    return {
      isShow: false,
      cars_active_data: JSON.parse(localStorage.getItem("cars_active")) || "",
      parking: [],
      parking_id: ""
    }  
  },
  computed: {
    show() {
      const router = this.$route
      return router.name === "Index" ? false : true
    },
    parkingIdItem() {
      return this.$store.state.location.parking_id
    }
  },
  beforeMount() {
    // if(!this.order_no) {
    //   this.carsActivation();
    // }
    // 如果没有订单号，则请求
    !this.cars_active_data && this.carsActivation();
  },
  methods: {
    handleCancelCar() {
      CarsCancel({
        order_no:this.cars_active_data.order_no,
        cars_id:this.cars_active_data.cars_id}).then((res) => {
        this.$message({
          type: "success",
          message: res.message
        })
        localStorage.removeItem("cars_active");
        this.cars_active_data = null;
      })
    },
    handleReturnCar() {
      CarsReturns({
        order_no:this.cars_active_data.order_no,
        cars_id:this.cars_active_data.cars_id,
        parking_id: this.parking_id
        }).then((res) => {
        this.$message({
          type: "success",
          message: res.message
        })
        localStorage.removeItem("cars_active");
        this.cars_active_data = null;
      })
    },
    handleGetCar() {
      CarsGet({
        order_no:this.cars_active_data.order_no,
        cars_id:this.cars_active_data.cars_id}).then((res) => {
        this.$message({
          type: "success",
          message: res.message
        })
        if(res.data && res.data.order_status) {
          this.$set(this.cars_active_data,"order_status",res.data.order_status);
          localStorage.setItem("cars_active",JSON.stringify(this.cars_active_data));
        }
      })
    },
    carsActivation() {
      CarsActivation().then((res) => {
        const data = res.data;
        if(data) {
          this.cars_active_data = res.data;
          localStorage.setItem("cars_active",JSON.stringify(data));
        }
      })
    },
    callbackComponent(params) {
      params.function && this[params.function](params.data);
    },
    loadMap() {
      Parking().then((res) => {
        const data = res.data.data;
        data.forEach((item) => {
          item.position = item.lnglat.split(",");
          item.content = `<img src=${require('@/assets/images/parking_location_img.png')} />`;
          item.offset = [-35, -45];
          item.label = {content:"1",offset:[10, 10]};
          item.text = `<div style="width:70px;font-size:20px;color:#fff;text-align:center;" >${item.carsNumber}</div>`
          item.offsetText = [-35, -25];
          item.events = {
            click: (e) => {
              this.$store.commit("app/SET_CARS_LIST_REQUEST", true);
              this.walkPlan(e);
              this.getCarsList(e);
            }
          }
        })
        this.$refs.map.parkingData(data);
        this.parking = data;
        const parkingId = data.map(item => item.id);
        this.$store.commit("location/SET_PARKING_ID",parkingId);
      })
    },
    walkPlan(data,item) {
      this.$refs.map.showWalkPlan(data);
    },
    getCarsList(e) {
      if(this.$refs.car) {
        const data = e.target.getExtData(); // amap提供的方法，需要在amap组件上绑定extData属性
        this.$refs.car.getCarsHandle({parkingId: data.id});
      }
    }
    
  }
}
</script>

<style lang="scss" scoped>
#children-view {
  position: fixed;
  top: 0;
  bottom: 0;
  right: -600px;
  width: 410px;
  background: #34393f;
  z-index: 9999;
  @include webkit(transition, all .3s ease 0s);
  @include webkit(box-shadow, -5px 0 38px 0 rgba(0,0,0,.4) );
  &.open {
    right: 0px;
  }
}
.cars-active {
  position: fixed;
  left: 20px;
  top: 20px;
  border-radius: 100px;
  padding: 10px;
  font-size: 12px;
  background-color: green;
  color: #fff;
}
.btn-group {
  position: fixed;
  left: 20px;
  top: 70px;
}
</style>